import React from 'react';
import ReactQuill, { Quill } from 'react-quill';
import { QuillOptionsStatic } from 'quill'
import * as Q from 'quill'
import 'react-quill/dist/quill.snow.css';
import { Modal,Button,Text } from '@casstime/bricks';
 

interface IEditorProps {
    editorValue?:string;
    // defaultDetail?:string;
    formats?:[];
    modules?:()=>void;
    // showUploadBox():Function;
    imageHandler?:(value:string)=>void;
}
interface IEditorState {
    isShowUploadPic?:boolean;
    // showUploadBox():Function;
}

export default class RichEditor extends React.Component<IEditorProps,IEditorState>{
    constructor(props){
        super(props);
        // this.showUploadBox = this.showUploadBox.bind(this);
        this.state={
            isShowUploadPic:false
        }   
    }
    // quillRef:any = null;      // Quill instance
    reactQuillRef:any = null; // ReactQuill component   
    modules:any = {
        toolbar: {
            container:[
                [{ header: [1, 2, 3, 4, 5, 6, false] }],
                ['bold', 'italic', 'underline', 'strike', 'blockquote'],
                [{ 'script': 'sub'}, { 'script': 'super' }],
                [{ 'direction': 'rtl' }],
                [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
                ['link', 'image'],
                ['clean'],
            ],
            // handlers: {
            //     'image': ()=>this.showUploadBox()
            //   }
        },   
    }
    formats:any = [
        'header',
        'bold', 'italic', 'underline', 'strike', 'blockquote',
        'script',
        'list', 'bullet', 'indent',
        'link', 'image',
    ];     

    //图片上传管理
    showUploadBox=()=>{
        this.setState({
            isShowUploadPic:true
        });
    }
    //关闭遮罩层
    closeUploadModal=()=>{
        this.setState({
            isShowUploadPic:false
        });
    }

    //编辑框文本处理
    onQuillChange=(content:any, delta:any, source:any, editor:any)=>{
        console.log('content');
        console.log(content);
        console.log('delta');
        console.log(delta.ops);
        console.log('source');
        console.log(source);
        console.log('editor');
        console.log(editor.getContents());
        // console.log(this.refs.reactQuillRef);
    }

    //上传图片
    selectPic=()=>{
        console.log(this.refs.filed);
        // this.refs.uploadInput.onclick;
    }
    //选择图片上传
    changeImage=()=>{
        console.log('上传');
    }
    render(){ 
        // const QuillDeltaToHtmlConverter = require('quill-delta-to-html');
        // const converter = new QuillDeltaToHtmlConverter(delta, {});
        // const html = converter.convert();
        const { isShowUploadPic } = this.state;

        return(
            <div>
                <ReactQuill
                    theme="snow"
                    modules={this.modules}
                    formats={this.formats}
                    onChange={this.onQuillChange}
                    // defaultValue={this.state.editorValue}
                    placeholder="Please Input"
                />
                    <Modal 
                        showBackdrop={false}
                        visible={isShowUploadPic}
                        // onBackdropClick={this.closeUploadModal}
                    >
                        <Modal.Header onClose={this.closeUploadModal}>
                            <Text bold>选择图片上传</Text>
                        </Modal.Header>
                        <Modal.Content>
                            <Button onClick={this.selectPic}>请选择上传图片</Button>
                            <input ref="filed" type='file' accept='image/*'
                                    style={{width:"100px",border:"none",visibility:"hidden"}}
                                    onClick={this.changeImage}
                            />
                        </Modal.Content> 
                        <Modal.Footer>
                            <Button onClick={this.closeUploadModal}>确定</Button>
                            <Button onClick={this.closeUploadModal} outline>取消</Button>
                        </Modal.Footer>
                    </Modal>
             {/* <div dangerouslySetInnerHTML={{__html: `${this.escape(html)}`}}/> */}
             
            </div>
            
        )
    }
}